<template>
  <edit-layout ref="layout" :page="page" :form="form" @invoke="invoke">
    <el-form
      ref="form"
      :model="form"
      :size="page.settings.formSize"
      :label-width="page.settings.labelWidth"
    >
      <el-divider content-position="left">车辆信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车辆名称" prop="name" :rules="page.rules.def">
            <el-input v-model="form.name" placeholder="车辆名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车牌" prop="no" :rules="page.rules.def">
            <el-input v-model="form.no" placeholder="车牌" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="核载重量(t)" prop="loadWeight" :rules="page.rules.def">
            <el-input-number v-model="form.loadWeight" :min="1" :max="100000" label="核载重量" />
            <!-- <el-input v-model="form.loadWeight" placeholder="核载重量" /> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签" prop="tag">
            <el-input v-model="form.tag" placeholder="标签" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车辆里程(km)" prop="mileage" :rules="page.rules.def">
            <el-input-number v-model="form.mileage" :min="1" label="车辆里程" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">证件信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车辆行驶证" prop="carLicense" :rules="page.rules.def">
            <img v-if="form.carLicense" :src="form.carLicense" width="60" height="60">
            <form-upload-image v-model="form.carLicense" size="mini" :remote="upload.img" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行驶证有效期" prop="carLicenseIndate" :rules="page.rules.def">
            <el-date-picker
              v-model="form.carLicenseIndate"
              value-format="yyyy-MM-dd"
              type="date"
              size="mini"
              placeholder="选择日期时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="年检单" prop="inspection" :rules="page.rules.def">
            <img v-if="form.inspection" :src="form.inspection" width="60" height="60">
            <form-upload-image v-model="form.inspection" size="mini" :remote="upload.img" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年检单有效期" prop="inspectionIndate" :rules="page.rules.def">
            <el-date-picker
              v-model="form.inspectionIndate"
              value-format="yyyy-MM-dd"
              type="date"
              size="mini"
              placeholder="选择日期时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商业险保单" prop="commercialInsurance" :rules="page.rules.def">
            <img v-if="form.commercialInsurance" :src="form.commercialInsurance" width="60" height="60">
            <form-upload-image v-model="form.commercialInsurance" size="mini" :remote="upload.img" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商业险保单有效期" prop="commercialInsuranceIndate" :rules="page.rules.def">
            <el-date-picker
              v-model="form.commercialInsuranceIndate"
              value-format="yyyy-MM-dd"
              type="date"
              size="mini"
              placeholder="选择日期时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="交强险保单" prop="compulsoryInsurance" :rules="page.rules.def">
            <img v-if="form.compulsoryInsurance" :src="form.compulsoryInsurance" width="60" height="60">
            <form-upload-image v-model="form.compulsoryInsurance" size="mini" :remote="upload.img" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交强险保单有效期" prop="compulsoryInsuranceIndate" :rules="page.rules.def">
            <el-date-picker
              v-model="form.compulsoryInsuranceIndate"
              value-format="yyyy-MM-dd"
              type="date"
              size="mini"
              placeholder="选择日期时间"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 编辑状态 -->
      <div v-if="form.id">
        <el-divider content-position="left">驾驶员信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="状态" prop="used">
              <el-tag v-if="form.used=='Y'" type="success">已启用</el-tag>
              <el-tag v-else-if="form.used=='N'" type="danger">未启用</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="绑定状态" prop="isBind">
              <el-tag v-if="form.isBind==1" type="success">已绑定</el-tag>
              <el-tag v-if="form.isBind==0" type="danger">未绑定</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.isBind ==1">
          <el-col :span="8">
            <el-form-item label="绑定司机" prop="used">
              <label>{{ form.driverInfo.realName }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机号码" prop="used">
              <label>{{ form.driverInfo.phone }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建时间" prop="createTime">
              <label>{{ form.createTime }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="修改时间" prop="updateTime">
              <label>{{ form.updateTime }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建人" prop="creator">
              <label>{{ form.creator }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="修改人" prop="updator">
              <label>{{ form.updator }}</label>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 已绑定状态 -->
      <!-- <div v-if="form.isBind==1">
        <el-divider content-position="left">车辆信息</el-divider>
        <el-form-item label="绑定车辆" prop="carName">
          <el-input v-model="form.carName" class="col" placeholder="绑定车辆" disabled />
        </el-form-item>
        <el-form-item label="车牌号" prop="carNo">
          <el-input v-model="form.carNo" class="col" placeholder="车牌号" disabled />
        </el-form-item>
      </div>-->

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" class="col" placeholder="备注" />
      </el-form-item>
    </el-form>
  </edit-layout>
</template>
<script>
import adminSupport from 'lola-admin-support-el'

export default {
  name: 'CarsEdit',
  mixins: [adminSupport.mixins.edit],
  data() {
    return {
      name: 'Cars'
    }
  },
  mounted() {
    // this.page.tip = '请选择驾驶员账号，绑定后将不可修改!'
    this.init() // 初始化
  },
  methods: {
    init() {
      const that = this
      that.page.ids.push(this.$route.params.no) // 页面主参数赋值
      that.loadData() // 加载数据
    },
    // 重写按钮方法
    buildOtherBtn(item, btn) {
      switch (item.code) {
        case 'm5112': // 删除
          btn.disable = false
          btn.type = 'danger'
          break
        case 'm5115': // 启用
          btn.disable = false
          btn.type = 'info'
          break
        case 'm5116': // 停用
          btn.disable = false
          btn.type = 'warin'
          break
      }
    },
    appendForm() {
      const roleIds = []
      if (this.form.roles != null) {
        this.form.roles.forEach(item => {
          roleIds.push(item.id)
        })
      }
      this.form.roleIds = roleIds
    },
    buildForm() {
      return true
    },
    // 驾驶员选择改变事件
    driverChange(val) {
      console.log(11)
      console.log(val)
    }
  }
}
</script>
